<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>理想生活上天猫</title>
		<link rel="stylesheet" type="text/css" href="./css/base.css"/>
		<link rel="stylesheet" type="text/css" href="./css/logIn.css"/>
		<link rel="stylesheet" type="text/css" href="./css/Icon.css"/>
	</head>
	<body>
		
		<div id="head">
			<div class="logo"></div>
		</div>
		<div id="bg">
			<div class="bgi">
				<div class="log_wid fr">
					<div class="ewm fr">扫码登录更安全</div>
					<div class="center">
						<div class="font">
							<a href="javascript:;">密码登录</a>
							<a href="javascript:;">短信登陆</a>
						</div>
						<div class="other" style="display: block;">
						<form action="" method="">
							<div class="in_put">
								<div class="inptt">
									<div class="zitu"><span class="icon-yonghuming">&#xe65a;</span></div>
									<input type="text" placeholder="会员名/邮箱/手机号" />
								</div>
								<div class="inptm">
									<div class="zitu"><span class="icon-mima">&#xe6a8;</span></div>
									<input class="ps" type="password" placeholder="请输入登录密码" />
									<div class="eye">
										<span class="icon-yincang">&#xe85f;</span>
									</div>
								</div>
								<a class="inptb" href="">登 录</a>
							</div>
						</form>
						<div class="forget">
							<a class="fr" href="signIn.html" target="_blank">免费注册</a>
							<a class="fr" href="">忘记用户名</a>
							<a class="fr" href="">忘记密码</a>
						</div>
						</div>
						<div class="other">
						<form action="" method="">
							<div class="in_put">
								<div class="inptt">
									<div class="zitu"><span class="icon-shouji">&#xe65f;</span></div>
									<input type="text" placeholder="请输入手机号" />
								</div>
								<div class="inptm">
									<div class="zitu"><span class="icon-shouhuo">&#xe610;</span></div>
									<input class="ps" type="password" placeholder="请输入验证码" />
								</div>
								<a class="inptb" href="">登 录</a>
							</div>
						</form>
						<div class="forget">
							<a class="fr" href="signIn.html" target="_blank">免费注册</a>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer_doc">
			<div class="footer_top">
				<a href="">关于天猫 </a>
				<a href="">帮助中心</a>
				<a href="">开放平台</a>
				<a href="">诚聘英才</a>
				<a href="">联系我们</a>
				<a href="">网站合作</a>
				<a href="">法律声明</a>
				<a href="">隐私权政策</a>
				<a href="">知识产权</a>
				<a href="">廉正举报</a>
				<a href="">规则意见征集</a>
			</div>
			<div class="footer_middle">
				<a href="">阿里巴巴集团</a> <span>|</span>
				<a href="">淘宝网</a> <span>|</span>
				<a href="">天猫</a> <span>|</span>
				<a href="">聚划算</a> <span>|</span>
				<a href="">全球速卖通</a> <span>|</span>
				<a href="">阿里巴巴国际交易市场</a> <span>|</span>
				<a href="">1688</a> <span>|</span>
				<a href="">阿里妈妈</a> <span>|</span>
				<a href="">飞猪</a> <span>|</span>
				<a href="">阿里云计算</a> <span>|</span>
				<a href="">AliOS</a> <span>|</span>
				<a href="">阿里通信</a> <span>|</span>
				<a href="">万网</a> <span>|</span>
				<a href="">高德</a> <span>|</span>
				<a href="">UC</a> <span>|</span>
				<a href="">友盟</a> <span>|</span>
				<a href="">虾米</a> <span>|</span>
				<a href="">钉钉</a> <span>|</span>
				<a href="">支付宝</a> <span>|</span>
				<a href="">阿里安全 </a>
			</div>
			<div class="footer_bottom">
				<span>增值电信业务经营许可证：<a href=""> 浙B2-20110446</a></span>
				<span>市场名称登记证：工商网市字3301004119号</span>
				<span> 出版物网络交易平台服务经营备案证： 新出发浙备字第001号</span><br />
				<span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
				<span>互联网药品信息服务资质证书编号：浙-（经营性）-2017-0005</span>
				<span><a href=""><img src="imgs/police01.png" />浙公网安备 33010002000120号</a></span><br />
				<span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</span>
				<span>互联网药品交易服务资格证书：国A20150001</span><br />
				<span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</span>
				<span> 12318举报</span>
				<p>© 2003-2020 TMALL.COM 版权所有</p>
				<a href=""><img class="police01" src="imgs/police02.gif" ></a>
				<a href=""><img src="imgs/police03.jpg" ></a>
			</div>
		</div>
		<script type="text/javascript">
			var passwd = document.querySelector('.ps');
			var eye = document.querySelector('.eye');
			var icon = eye.querySelector('span');
			var flag = true;
			eye.onclick = function () {
				if (flag) {
					passwd.type = 'text';
					icon.className = 'icon-Group-';
					icon.innerHTML = '&#xe6a2;';
					flag = false;
				}else{
					passwd.type = 'password';
					icon.className = 'icon-yincang';
					icon.innerHTML = '&#xe85f;';
					flag = true;
				}
			}
			
			var logIn = document.querySelector('.font').children
			var other = document.querySelectorAll('.other')
			// console.log(logIn);
			for (var i = 0; i < logIn.length; i++) {
				logIn[i].setAttribute('data-index',i);
				logIn[i].onclick = function () {
					for (var i = 0; i < logIn.length; i++) {
						logIn[i].style.borderBottom = '0';
					}
					this.style.borderBottom = '2px solid #000000';
					
					
					var index = this.getAttribute('data-index');
					// console.log(index);
					for (var j = 0; j < other.length; j++) {
						other[j].style.display = 'none';
					}
					other[index].style.display = 'block';
				}
			}
			
		</script>
	</body>
</html>
